import React from 'react';
import { Descriptions, Space, Typography } from 'antd'
import GoBack from "@/components/TheGoBack";
import TheImage from '@/components/TheImage'
import TheTable from "@/components/TheTable";
import './style/style.scss'
import { getGoodsDetail } from '@/request/storeBackManage/goodsManage/goodsList'
const { Paragraph } = Typography

export default class goodsDetails extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      columns: [],
      dataSource: [],
      goodsId: '',//商品id
      storeGoodsId: '', //商品店铺id
      goodsInfo: [],//商品基本信息
      skuInfo: [],//sku信息
      productTxt: '',//商品详情信息
    }
  }
  componentDidMount() {
    console.log(this.props.match.params, 'this.props.match.params');
    this.setState({
      goodsId: this.props.match.params.goodsId,
      storeGoodsId: this.props.match.params.storeGoodsId
    }, () => {
      if (this.state.goodsId && this.state.storeGoodsId) {
        this.getData()
      }
    })
  }
  getData = async () => {
    let { goodsId, storeGoodsId } = this.state
    let res = await getGoodsDetail({ goodsId, storeGoodsId })
    if (res.code === 0 && res.data) {
      let goodsInfoData = res.data.nonSelfGoodsInfoDTO //基本信息数据
      let skuInfoData = res.data.nonSelfGoodsSkuDTOList //sku规格数据
      let goodsShowImagesData = goodsInfoData.goodsShowImages.split(',') //商品图片数据处理成数组
      console.log(goodsInfoData.goodsShowImages);
      let columns = [] //规格表头数据处理
      // 规格表格数据处理
      let dataSource = skuInfoData.map((v, i) => {
        let obj = {};
        v.skuAttribute.forEach((j, k) => {
          obj[k] = j.value;
        });
        obj.materialId = v.materialId;
        obj.skuOriginalPrice = <React.$Price price={v.skuOriginalPrice} />;
        obj.skuCurrentPrice = <React.$Price price={v.skuCurrentPrice} />;
        obj.skuStock = parseInt(v.skuStock).toLocaleString();
        obj.skuWeight = `${v.skuWeight / 1000}kg`;
        obj.skuDescription = v.skuDescription;
        obj.imageFile = <TheImage src={v.imageFile} width={80} height={80} />;
        return obj;
      });
      skuInfoData[0].skuAttribute.map((item, index) => {
        columns.push({
          title: item.key,
          dataIndex: index,
          key: index,
        });
      })
      columns = columns.concat([
        {
          title: "物料ID",
          dataIndex: "materialId",
          key: "materialId",
        },
        {
          title: "原价",
          dataIndex: "skuOriginalPrice",
          key: "skuOriginalPrice",
        },
        {
          title: "现价",
          dataIndex: "skuCurrentPrice",
          key: "skuCurrentPrice",
        },
        {
          title: "库存",
          dataIndex: "skuStock",
          key: "skuStock",
        },
        {
          title: "重量(KG)",
          dataIndex: "skuWeight",
          key: "skuWeight",
        },
        {
          title: "描述",
          dataIndex: "skuDescription",
          key: "skuDescription",
        },
        {
          title: "图片",
          dataIndex: "imageFile",
          key: "imageFile",
        },
      ]);
      this.setState({
        // 基本信息
        goodsInfo: [
          {
            label: '商品名称',
            value: goodsInfoData.goodsName,
          },
          {
            label: '适用宠物',
            value: goodsInfoData.goodsTag
          },
          {
            label: '商品分类',
            value: goodsInfoData.goodsClassifyName,
          },
          {
            label: '商品图',
            value: <Space className="timeline-content-img">
              {
                goodsShowImagesData.map(v => {
                  return <TheImage src={v} width={80} height={80} />
                })
              }
            </Space>,
          }
        ],
        productTxt: goodsInfoData.productTxt, //商品详细信息
        dataSource,//商品数据
        columns,
      })
    }
  }
  render() {
    let { goodsInfo, columns, dataSource, productTxt } = this.state
    return (
      <div className={"p-layout-box "}>
        <GoBack history={this.props.history} title={"非自营商品详情"} />
        <div className={" commodity-content"}>
          <Paragraph strong>
            <blockquote>基本信息</blockquote>
          </Paragraph>
          <Descriptions column={1}>
            {
              goodsInfo.map(item => {
                return <Descriptions.Item label={item.label}>{item.value}</Descriptions.Item>
              })
            }
          </Descriptions>
          <Paragraph strong>
            <blockquote>价格库存</blockquote>
          </Paragraph>
          <TheTable
            scroll={{ x: "max-content", y: '61vh' }}
            columns={columns}
            dataSource={dataSource}
            rowKey='goodsId'
          />
          <Paragraph strong>
            <blockquote>商品详情</blockquote>
          </Paragraph>
          <div
            style={{ overflowX: "auto" }}
            dangerouslySetInnerHTML={{ __html: productTxt }}
          />
        </div>
      </div >
    )
  }
}